<template>
  <div>
    <div class="m-b-30px">
      <el-select v-model="value" placeholder="套餐名称" style="width: 240px" @change="selectTrigger(value)">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          :disabled="item.disabled" />
      </el-select>
    </div>
    <div class="flex-c">
      <el-card style="max-width: 480px" body-style="padding:5px;" shadow="hover" class="plan_card w-480px max-w-480px">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="套餐ID" label-align="right" align="center">{{ plan.plan_id
            }}</el-descriptions-item>
          <el-descriptions-item label="套餐名称" label-align="right" align="center">{{ plan.name }}</el-descriptions-item>
          <el-descriptions-item label="内存" label-align="right" align="center">{{ plan.memory }}
            MB</el-descriptions-item>
          <el-descriptions-item label="硬盘" label-align="right" align="center">
            {{ plan.disk }} GB
          </el-descriptions-item>
          <el-descriptions-item label="CPU" label-align="right" align="center">{{ plan.cpu }} 核</el-descriptions-item>
          <!-- <el-descriptions-item v-if="TypeData == 'dockerContainer'" label="上行带宽" label-align="right" align="center">{{
            plan.bandwidth_tx }} mbps</el-descriptions-item>
          <el-descriptions-item v-if="TypeData == 'dockerContainer'" label="下行带宽" label-align="right" align="center">{{
            plan.bandwidth_rx }} mbps</el-descriptions-item>
          <el-descriptions-item v-if="TypeData == 'dockerContainer'" label="上行流量阈值" label-align="right"
            align="center">{{ plan.threshold_tx }} mbps</el-descriptions-item>
          <el-descriptions-item v-if="TypeData == 'dockerContainer'" label="下行流量阈值" label-align="right"
            align="center">{{ plan.threshold_rx }} mbps</el-descriptions-item> -->
          <el-descriptions-item label="读写限制(1iops=8kb/s)" label-align="right" align="center">{{ plan.min_iops
            }}/iops</el-descriptions-item>
          <el-descriptions-item label="读写最大突发(1iops=8kb/s)" label-align="right" align="center">{{ plan.max_iops
            }}/iops</el-descriptions-item>
          <el-descriptions-item label="允许开放端口数" label-align="right" align="center">{{ plan.port_num }}
          </el-descriptions-item>
          <el-descriptions-item label="默认允许快照数" label-align="right" align="center">{{ plan.snapshot_num }}
          </el-descriptions-item>
          <el-descriptions-item label="剩余数量" label-align="right" align="center">{{ plan.number }}</el-descriptions-item>
          <el-descriptions-item label="价格" label-align="right" align="center">{{ plan.price }} 元</el-descriptions-item>
          <el-descriptions-item label="额外硬盘价格" label-align="right" align="center">{{ plan.volume_price }}
            元</el-descriptions-item>
          <el-descriptions-item label="描述" label-align="right" align="center" span="2">{{ plan.description
            }}</el-descriptions-item>
          <el-descriptions-item label="操作" label-align="right" align="center">
            <el-button size="small" @click="editPlan(plan.plan_id)">确认</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, defineProps, defineEmits } from "vue";
import { getServerPlan } from "@/api/server";
const emit = defineEmits(["SetIdPlan"]);
onMounted(async () => {
  await GetPlans();
  // 确保在获取到数据后再设置 value
  if (props.TCID) {
    value.value = props.TCID;
    selectTrigger(props.TCID);
  }
});

const props = defineProps(["ID", "TCID"]);

// 获取服务器套餐
const planList = ref([]);
const GetPlans = async () => {
  let plans = await getServerPlan({
    server_id: props.ID,
    count: 30
  });
  planList.value = plans.data.data;
  options.value = plans.data.data.map((plan: any) => ({
    value: plan.plan_id,
    label: plan.name
  }));
  console.log("服务器套餐", options.value, plans);
};
const selectTrigger = ID => {
  console.log("ID", ID);
  plan.value = planList.value.find(item => item.plan_id === ID);
  console.log("plan", plan.value);
};
const editPlan = id => {
  emit("SetIdPlan", id);
};

const plan = ref({});
const value = ref("");
const options = ref([]);
</script>

<style scoped></style>
